<template>
  <div class="choselist">
     <div class="head">
        <div @click="goback"><i class="iconfont icon-xiangzuo"></i></div>
        <span>{{filmInfo.name}}</span>
     </div>
     <div>
         <div class="daynav">
               <div :class="{'bgcolor':flag}" v-for="(days,index) in showCinemaDay" :key="index" @click="getlist(days.cinemaList)">
                  {{days.showDate|day}}
               </div>
         </div>
         <div class="cinemalist" v-for="(cinemainfo,index) in cinemas" :key="index" @click="goto(cinemainfo.cinemaId)">
            <div class="left">
              <span> {{cinemainfo.name}}</span>
              <div>{{cinemainfo.address}}</div>
            </div>
            <div class="right">
               <span>{{(cinemainfo.lowPrice)/100}} ￥</span>
               <div>距离未知</div>
            </div>
         </div>
    </div>
  </div>
</template>

<script>
import { getMovieDetail,getfilmShowCinema,getCinemaDetail, getCinemalist } from '../../api'
export default {
   data(){
      return {
         filmInfo:{},
         showCinemaDay:[],
         cinemas:[],
         cinemaList:[],
         mycinemaId:'',
         mycinemaDetail:[],
         fid:'',
         cid:'',
         flag:false,
         obj:[]
      }
   },
   created(){
      // console.log(id)
      this.getlist(this.cinemaList)
      this.fid = this.$cookie.getCookie('filmID')
      this.cid = this.$cookie.getCookie('cityID')
      this.getMovie(this.fid)
      this.getMovieShow(this.fid,this.cid)
       getfilmShowCinema(this.fid,this.cid).then(res=>{
          this.cinemaList = res.data.data.showCinemas[0].cinemaList
          console.log(this.cinemaList)
          getCinemalist(this.cid,this.cinemaList.join(',')).then(resp=>{
             this.cinemas = resp.data.data.cinemas
          })
       })
   },
   methods:{
      getMovie(fid){
         getMovieDetail(fid).then((res)=>{
            this.filmInfo = res.data.data.film
            console.log(this.filmInfo)
         })
      },
      getMovieShow(fid,cid){
         getfilmShowCinema(fid,cid).then((res)=>{
            this.showCinemaDay = res.data.data.showCinemas
            console.log(this.showCinemaDay)
         })
      },
       getlist(list){
         console.log(list)
         this.cinemaList = list
            // console.log(this.cinemaList)
            getCinemalist(this.cid,this.cinemaList.join(',')).then(resp=>{
               this.cinemas = resp.data.data.cinemas
                console.log(this.cinemas)
            })
      },
      
     
      goback(){
         this.$router.go(-1)
         this.$cookie.removeCookie('filmID')
      },
      goto(id){
         this.$router.push('/cinemadetail/'+id)
      }
   },
     filters:{
         time(nS){
            return new Date(parseInt(nS) * 1000).toLocaleTimeString().replace(/:\d{1,2}$/,' '); 
         },
         day(nS){
            return new Date(parseInt(nS) * 1000).toLocaleDateString().replace(/:\d{1,2}$/,' '); 

         }
      }
}
</script>

<style>
.choselist .head{
   height:1rem;
   text-align: center;
   font-size:0.35rem;
}
.choselist .head>div{
   float:left;
}
.choselist .daynav{
   height:1rem;
   border:1px solid lightgray;
   overflow: auto;
   display: flex;
   align-items: center;
}
.choselist .daynav div{
   margin-left:0.2rem;
}
.choselist .bgcolor{
   color:red;
}
.choselist .cinemalist{
   height:1rem;
   border-bottom: 0.01rem solid lightgray;
   display: flex;
   justify-content: space-around;
   align-items:center;
}
.choselist .cinemalist .left{
   width:70%;
   display: left;
   display: flex;
   flex-direction:column;
}
.choselist .cinemalist .left div{
   width:100%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   font-size:0.2rem;
   color: gray;
}
.choselist .cinemalist .right{
   display: flex;
   flex-direction: column;
}
.choselist .cinemalist .right div{
   font-size:0.2rem;
   color:gray;
}
.choselist .cinemalist .right span{
   color:red;
}
</style>